<template>
  <div class="root-resource">
    <div class="findArea">
      <ul>
        <li>
          <label>算子名称：</label>
          <el-input v-model="queryParams.value" placeholder="请输入" clearable></el-input>
        </li>
        <li>
          <el-button type="primary" @click="handleSearch">
            <svg-icon class="menu-icon font-14" icon-class="resource_search"></svg-icon>
            搜索
          </el-button>
        </li>
      </ul>
    </div>
    <div ref="contentAreaRef" class="contentArea">
      <el-table v-if="tableVisible" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" v-loading="tableLoading" :height="tableHeight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="value" label="算子名称" width="255" show-overflow-tooltip></el-table-column>
        <el-table-column prop="label" label="描述" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { OPERATERS_ENUM } from './data'

export default {
  name: 'innnerOpe',
  components: {
  },
  data () {
    return {
      queryParams: {
        value: ''
      },
      tableHeight: 400,
      tableVisible: true,
      tableData: [],
      tableLoading: false,
      totalSize: 0,
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      checkedRowsId: [],
      batchDelLoading: false,
      popup: {
        mode: 0,
        show: false
      }
    }
  },
  created () {
    this.params = this.$route.params
    this.requestList()
  },
  mounted () {
    this.tableHeight = this.$refs.contentAreaRef.clientHeight
    this.tableVisible = false
    this.$nextTick(() => {
      this.tableVisible = true
    })
  },
  methods: {
    ...mapActions({
      getAccessTokenList: 'GET_ACCESSTOKEN_LIST',
      stopAccessToken: 'STOP_ACCESSTOKEN',
      startAccessToken: 'START_ACCESSTOKEN',
      deleteAccessToken: 'DELETE_ACCESSTOKEN'
    }),
    async requestList () {
      this.tableData = OPERATERS_ENUM
      // const parmas = {
      //   ...this.queryParams,
      //   ...this.pageInfo,
      //   projectId: this.params.projectId
      // }
      // this.tableLoading = true
      // const res = await this.getAccessTokenList(parmas)
      // if (res.code == 200) {
      //   this.tableLoading = false
      //   this.tableData = res.data.list
      //   this.totalSize = res.data.total
      //   this.checkedRowsId = []
      // }
    },
    CopySuccess () {
      this.$message.success('复制成功')
    },
    CopyError () {
      this.$message.error('复制失败')
    },
    async handleStart (row) {
      try {
        const res = await this.startAccessToken({ ids: [row.id] })
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.handleSearch()
        } else {
          this.$message.error('操作失败')
        }
      } catch (e) {
        console.log(e)
      }
    },
    async handleStop (row) {
      this.$confirm(
        '您确定要停用此任务吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        this.confirmStop(row)
      })
    },
    async confirmStop (row) {
      try {
        const res = await this.stopAccessToken({ ids: [row.id] })
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.handleSearch()
        } else {
          this.$message.error('操作失败')
        }
      } catch (e) {
        console.log(e)
      }
    },
    handleSelectionChange (data) {
      this.checkedRowsId = data.map(item => item.id)
    },
    handleRowDel (row) {
      // 单个删除
      this.deleteAccessToken({ ids: [row.id] }).then(res => {
        const { code } = res
        if (code === 200) {
          this.checkedRowsId = []
          this.handleSearch()
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败')
        }
        this.batchDelLoading = false
      })
    },
    handleBatchDel () {
      // 批量删除
      if (this.checkedRowsId.length) {
        this.batchDelLoading = true
        this.deleteAccessToken({ ids: [...this.checkedRowsId] }).then(res => {
          const { code } = res
          if (code === 200) {
            this.checkedRowsId = []
            this.handleSearch()
            this.$message.success('操作成功')
          } else {
            this.$message.error('操作失败')
          }
          this.batchDelLoading = false
        })
      } else {
        this.$message.warning('请先勾选数据~')
      }
    },
    handleSearch () {
      // this.pageInfo.page = 1
      // this.requestList()
      if (this.queryParams.value){
        this.tableData = [OPERATERS_ENUM.find(i=>i.value===this.queryParams.value)]
      } else {
        this.tableData = OPERATERS_ENUM
      }
    },
    handleAdd () {
      this.popup.show = true
      this.popup.mode = 0
    },
    handlePopupClosed () {
      this.popup.show = false
    },
    handleRowEdit (row) {
      this.popup.show = true
      this.popup.mode = 1
      this.popup.data = row
    }
  }
}
</script>

<style lang="scss" scoped>
.root-resource {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.findArea {
  display: flex;
  justify-content: space-between;
  background-color: $--color-nav;
  padding: 4px 12px;
  margin-bottom: 5px;

  ul {
    display: flex;
    align-items: center;

    li {
      display: flex;
      align-items: center;
      margin-right: 10px;

      label {
        white-space: nowrap;
        color: $--mian-color;
      }
    }
  }
}

.contentArea {
  flex: 1;
  overflow: hidden;

  .copyArea {
    display: flex;

    .copy-icon {
      cursor: pointer;
    }

    .text {
      margin-right: 5px;
    }
  }

  .del {
    color: #c73234;
    margin-left: 20px;
  }

  .del,
  .edit {
    padding: 0;
  }
}

.statusBox {
  display: flex;
  justify-content: start;
  align-items: center;

  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;

    &.success {
      background: #00B929;
    }

    &.err {
      background: #D33232;
    }
  }
}

.stopBtn {
  color: #FF7E06;
}
</style>
